<template>
	<section v-infinite-scroll="load">
		<search-bar @search="search"></search-bar>
		
		<div class="tab-wrap">
			<p>模型广场</p>
			<div>
				<span v-for="(item,index) in tabList" :class="tabActive == index ? 'current' : ''" @click="changeTab(item,index)" :key='index'>{{item}}</span>
			</div>
		</div>
		
		<ul class="model-wrap">
			<li v-for="(item, index) in modelList" :key="item.id" class="model-list infinite-list-item" @click="toDetail(item)">
				<div class="content">
					<img :src='staticURL+item.thumbnail_url' v-if='item.thumbnail_url' class='bg_logo'/>
					<img src="@/assets/img/defaultBg.png" class='bg_logo' v-else/>
					
					<div class="content-bottom">
						<div class="user-info">
							<img :src="item.headimg" v-if='item.headimg'>
							<img src="@/assets/img/user-logo.png" v-else/>
							<span>{{item.realname}}</span>
						</div>
						
						<div class="tool-info">
							<span>
								<img src="@/assets/img/view.png" class="view"/>
								{{item.view_num ?? 0}}
							</span>
							
							<span @click.stop="collect(item)" class="can-click">
								<img src="@/assets/img/collect-active.png" class="collect"v-if='item.is_collect == 1'>
								<img src="@/assets/img/collect.png" class="collect" v-else>
								{{item.collect_num ?? 0}}
							</span>
							<span @click.stop="like(item)" class="can-click">
								<img src="@/assets/img/like-active.png" class="like" v-if='item.is_like == 1'>
								<img src="@/assets/img/like.png" v-else>
								{{item.like_num ?? 0}}
							</span>
						</div>
					</div>
					
					<div class="content-middle" :class="item.type == 1 ? 'model-bg' : ''">
						<div class="level-wrap">
							<!-- <div v-if='item.level == 3' class="level">
								<span class="school-fine">优</span>
								<span class="school">校</span>
							</div>
							
							<div v-else-if='item.level == 2' class="level">
								<span class="ban-fine">优</span>
								<span class="ban">班</span>
							</div> -->
							
							<div class="level">
								<span class="school-fine" v-text="item.type == 1 ? '文本' : '图片'"></span>
							</div>
							
							<div class="download" v-show='item.download_num'>
								<i class="iconfont icon-remen"></i>
								<span>{{item.download_num}}</span>
							</div>
						</div>
						
						<p class="name">{{item.name}}</p>
					</div>
				</div>
			</li>
		</ul>
		<!-- <common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange" @page-change="handlePageChange"></common-pagination> -->
		<model-render v-if="isShowModel" :model_id="model_id" @close="isShowModel = false"></model-render>
		<img-render v-if="isShowImg" :model_id="model_id" @close="isShowImg = false"></img-render>
		<img-model-render v-if="isShowImgModel" :model_id="model_id" @close="isShowImgModel = false"></img-model-render>
	</section>
</template>

<script>
	import utils from '@/assets/js/utils';
	import CommonPagination from '@/components/CommonPagination';
	import modelRender from './components/modelRender';
	import imgRender from './components/imgRender';
	import imgModelRender from './components/imgModelRender';
	import SearchBar from '@/components/SearchBar';
	import {
		getModelTypeList,
		getModelList,
		modelLike,
		modelCollect
	} from '@/api/model.js';
	export default {
		components: {
			CommonPagination,
			modelRender,
			imgRender,
			imgModelRender,
			SearchBar
		},
		data() {
			return {
				tabList:[],
				tabActive:0,
				modelList:[],
				modelDetail:{},
				modelInfo:{},
				model_id:"",
				isShowModel: false,
				isShowImg:false,
				isShowImgModel:false,
				total: 0,
				searchData: {
					page: 1,
					size: 10,
					key:'',
					model_type:''
				},
				isMoreData:true,
				keyword: '',
				token:"",
				isShowDelete:false,
				searchTimer: null // 搜索截流
				
			};
		},

		watch: {
			keyword() {
				this.clearTimer();
				this.searchTimer = setTimeout(() => {
					this.searchData.page = 1;
					this.getModelList();
				}, 500);
				if (!this.keyword) {
					this.$refs.input1.blur();
				}
			}
		},

		created() {
			this.token = utils.getSession('token');
			this.getModelTypeList();
		},

		methods: {
			async getModelTypeList() {				
				const {
					data,
					status
				} = await getModelTypeList();
				if (status !== 200) return;
				if(data.code == 200){
					this.tabList = data?.data?.info || [];
					this.tabList.unshift("全部");
					this.searchData.model_type = this.tabList[0];
					this.getModelList("init");
				}
				else{
					this.tabList = [];
					this.$message.warning(data && data.message || '获取数据失败');
				}
			},
			
			async getModelList(type='') {
				if(type == "init"){
					utils.loadGif.hideLoading();
				}				
				const {
					data,
					status
				} = await getModelList(this.searchData);
				if (status !== 200) return;
				if(data.code == 200){
					if(data?.data?.list?.length){
						this.modelList = this.modelList.concat(data?.data?.list);
						if(data?.data?.list?.length > 9){
							this.isMoreData = true;
						}
						else{
							this.isMoreData = false;
						}
					}
					else{
						this.isMoreData = false;
					}
					this.total = data.data?.total || 0
				}
				else{
					this.modelList = [];
					this.total = 0
					this.$message.warning(data && data.message || '获取数据失败');
				}
				utils.loadGif.hideLoading();
			},

			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getModelList();
			},

			handlePageChange(page) {
				this.searchData.page = page;
				this.getModelList();
			},

			clearTimer() {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}
			},

			search(key){
				this.searchData.key = key;
				this.searchData.page = 1;
				this.getModelList()
			},
			
			changeTab(item,index){
				this.tabActive = index;
				this.searchData.page = 1;
				this.searchData.model_type = item;
				this.getModelList()
			},
			
			//收藏
			async collect(item){
				if(!this.token){
					this.$message.warning("请先登录");
					this.$router.push("/login");
					return
				}
				const obj = {
					model_id: item.id,
					status: item.is_collect == 1 ? 0 : 1
				};
				const {
					data,
					status
				} = await modelCollect(obj);
				if (status !== 200) return;
				if(data.code == 200){
					this.getModelList();
					this.$message.success(item.is_collect == 1 ? "已取消收藏" : "收藏成功");
				}
				else{
					this.$message.warning(item.is_collect == 1 ? "取消收藏失败" : "收藏失败");
				}	
			},
			
			//点赞
			async like(item){
				if(!this.token){
					this.$message.warning("请先登录");
					this.$router.push("/login");
					return
				}
				const obj = {
					model_id: item.id,
					status: item.is_like == 1 ? 0 : 1
				};
				const {
					data,
					status
				} = await modelLike(obj);
				if (status !== 200) return;
				if(data.code == 200){
					this.getModelList();
					this.$message.success(item.is_like == 1 ? "已取消点赞" : "点赞成功");
				}
				else{
					this.$message.warning(item.is_like == 1 ? "取消点赞失败" : "点赞失败");
				}	
				
			},
			
			toDetail(item) {
				if(!this.token){
					this.$message.warning("请先登录");
					this.$router.push("/login");
					return
				}
				this.model_id = item.id;
				if(item.type == "1"){//文本模型
					this.isShowModel = true;
				}
				else if(item.type == "2"){//图片
					this.isShowImg = true;
				}
				else if(item.type == "3"){//图片模型
					this.isShowImgModel = true;
				}
				// this.$router.push({
				// 	path: './order-detail',
				// 	query: {
				// 		order_uuid: item.uuid
				// 	}
				// });
			},
			load () {
				if(this.isMoreData){
					this.searchData.page += 1;
					this.getModelList();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	section{
		height: 100%;
		overflow: auto;
	}
	.tab-wrap{
		p{
			font-weight: bold;
			font-size: 18px;
			color: #000000;
		}
		div{
			@include flex-row;
			@include cursor-style;
			margin: 15px 0;
			span{
				font-size: 14px;
				color: #666666;
			}
			span:not(:last-child){
				margin-right: 20px;
			}
			.current{
				font-weight: 500;
				color: #333333;
				background: url("../../assets/img/tab-active.png") no-repeat center bottom;
				background-size: 100% 4px;
			}
		}
	}
	.model-wrap{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		.model-list{
			width: 20%;
			margin-bottom: 30px;
			.content{
				position: relative;
				width: 92%;
				height: 100%;
				.bg_logo{
					display: block;
					width: 100%;
					height: 322px;
					border-radius: 10px 10px 0px 0px;
					cursor: pointer;
				}
				.content-middle{
					z-index: 9;
					position: absolute;
					top:0;
					left: 0;
					right: 0;
					width: 100%;
					height: 322px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 20px 26px;
					box-sizing: border-box;
					border-radius: 10px 10px 0px 0px;
					cursor: pointer;
					color: #fff;
					.level-wrap{
						@include flex-row;
						justify-content: space-between;
						.level{
							span{
								padding: 5px 10px;
								font-size: 12px;
								font-weight: bold;
							}
							.school-fine{
								background: #FF8A00;
								border-radius: 5px;
								color: #FFFFFF;
							}
							.school{
								background: #FFFFFF;
								border-radius: 0px 5px 5px 0px;
								color: #FF8A00;
							}
							.ban-fine{
								background: #D0D6D8;
								border-radius: 5px 0px 0px 5px;
								color: #FFFFFF;
							}
							.ban{
								background: #FFFFFF;
								border-radius: 0px 5px 5px 0px;
								color: #BCC3C5;
							}
						}
						.download{
							padding: 5px 8px;
							background: rgba(51,51,51,0.3);
							border-radius: 5px 5px 5px 5px;
							span{
								margin-left: 4px;
								font-size: 14px;
								color: #FFFFFF;
							}
						}
					}
					.name{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-weight: 400;
						font-size: 14px;
						color: #FFFFFF;
					}
				}
				.model-bg{
					background: rgba(0, 0, 0, 0.6);
				}
				.content-bottom{
					@include flex-row;
					justify-content: space-between;
					margin-top: 10px;
					.user-info{
						@include flex-row;
						img{
							display: block;
							width:24px;
							height: 24px;
							border-radius: 50%;
							margin-right: 4px
						}
						span{
							font-size: 14px;
							color: #999999;
						}
					}
					.tool-info{
						@include flex-row;
						font-size: 12px;
						color: #999999;
						span{
							@include flex-row;
							img{
								display: block;
								margin-right: 4px;
							}
						}
						.can-click{
							@include cursor-style;
						}
						span:not(:last-child){
							margin-right: 10px;
						}
					}
				}
				.delete-wrap{
					z-index: 10;
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					right: 0;
					top: 0;
					background: rgba(0, 0, 0, 0.1);
					display: flex;
					align-items: center;
					justify-content: center;
					i{
						font-size:36px;
						cursor: pointer;
						color:#fff
					}
				}
			}
			.content:hover{
				transform: scale(1.05);
				transition: all 0.5s;
			}
		}
		// .model-list:not(:last-child){
		// 	margin-right: 30px;
		// }
	}
</style>
